<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>svg 图片测试</title>
    {css href="/static/h-ui/css/H-ui.css" /}
    {load href="/static/lib/Hui-iconfont/1.0.8/iconfont.min.css" /}
    {load href="/static/swiper/swiper-3.4.2.min.css" /}
    {css href="/static/css/home.css" /}
    {js href="/static/jquery/jquery-3.2.1.js" /}
    {js href="/static/h-ui/js/H-ui.js" /}
    {load href="/static/swiper/swiper-3.4.2.jquery.min.js" /}

</head>
<body>
<header class="navbar-wrapper navbar-fixed-top">
    <div class="navbar navbar-black  ">
        <div class="container cl">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="/aboutHui.shtml">H-ui前端框架</a>
            <a class="logo navbar-logo-m f-l mr-10 visible-xs" href="/aboutHui.shtml">H-ui</a>
            <span class="logo navbar-slogan f-l mr-10 hidden-xs">简单 &middot; 免费 &middot; 适合中国网站</span>
            <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:;">&#xe667;</a>
            <nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
                <ul class="cl">
                    <li class="current"><a href="/">首页</a></li>
                    <li><a href="#">核心</a></li>
                    <li><a href="#">扩展</a></li>
                    <li><a href="#">联系我们</a></li>
                </ul>
            </nav>
            <nav class="navbar-userbar hidden-xs">

            </nav>
        </div>
    </div>
</header>

<div class="container home-container mt-40">

    <div class="home-header row cl">
        <div class="home-header_swiper col-sm-8">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img width="100%" src="http://wx-12.oss-cn-shanghai.aliyuncs.com/tpy/art.jpg">
                    </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
                <!-- 如果需要导航按钮 -->
                <!--<div class="swiper-button-prev"></div>-->
                <!--<div class="swiper-button-next"></div>-->
                <!-- 如果需要滚动条 -->
                <!--<div class="swiper-scrollbar"></div>-->
            </div>
        </div>
        <div class="home-header_intro  col-sm-4">
            <div class="panel panel-secondary">
                <div class="panel-header">我的名片</div>
                <div class="panel-body">
                    <h3>我的名片</h3>
                    <p>网名：易腾</p>
                    <p>职业：Web前端开发、php初级</p>
                    <p>QQ：1412428870</p>
                    <p>Email：ytyjm@foxmail.com</p>
                </div>
            </div>
        </div>
    </div>

<div class="row cl mt-20 ">
    <div class="col-md-8">
        <div class="panel panel-primary">
            <div class="panel-header">文章推荐</div>
            <div class="panel-body">
                <div class=" media-item row cl" style="border: 1px solid #999999">
                    <div style="display:flex;">
                        <div class="media-left col-md-4">
                            <img src="http://wx-12.oss-cn-shanghai.aliyuncs.com/tpy/s1.jpg" alt="博客图片" class="thumbnail">
                        </div>
                        <div class="media-item_body" style="flex: 1;">
                            <h4>博客测试</h4>
                            <div>三等奖粉红色的粉红色快递发货时间快点恢复多发几个河段刚好大幅i个决定是否是个福克斯的辐射范围uj</div>
                        </div>
                    </div>
                    <div class="col-sm-12 ">
                        <div class="col-sm-6">
                            2017-12-12
                        </div>
                        <div class="col-sm-6">
                            作者
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>








</div>
<footer class="footer mt-20">
    <div class="container-fluid">
        <nav> <a href="#" target="_blank">关于我们</a> <span class="pipe">|</span> <a href="#" target="_blank">联系我们</a> <span class="pipe">|</span> <a href="#" target="_blank">法律声明</a> </nav>
        <p>Copyright &copy;2016 H-ui.net All Rights Reserved. <br>
            <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">京ICP备1000000号</a><br>
        </p>
    </div>
</footer>
<script type="text/javascript">
    $(document).ready(function () {
        var mySwiper = new Swiper ('.swiper-container', {

            loop: true,

            // 如果需要分页器
            pagination: '.swiper-pagination',

            // 如果需要前进后退按钮
//            nextButton: '.swiper-button-next',
//            prevButton: '.swiper-button-prev',
            // 如果需要滚动条
//            scrollbar: '.swiper-scrollbar',
        })
    })
</script>
</body>
</html>